<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <title>Law Fire</title>
        <meta name="description" content="" />

        <meta name="twitter:title" content="" />
        <meta name="twitter:description" content="" />

        <!-- Open Graph / Facebook -->
        <meta property="og:title" content="Title of the project" />
        <meta property="og:description" content="" />
        <meta property="og:type" content="website" />
        <meta property="og:url" content="https://github.com/PaulleDemon" />
        <!--Replace with the current website url-->
        <meta property="og:image" content="" />

        <link
            rel="shortcut icon"
            href="./assets/logo.png"
            type="image/x-icon"
        />
        <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap"
        />

        <!-- <link rel="stylesheet" href="../../tailwind-css/tailwind-runtime.css"> -->
        <link rel="stylesheet" href="./css/tailwind-build.css" />
        <link rel="stylesheet" href="./css/index.css" />

        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.3/font/bootstrap-icons.min.css"
            integrity="sha512-dPXYcDub/aeb08c63jRq/k6GaKccl256JQy/AnOq7CAnEZ9FzSL9wSbcZkMp4R26vBsMLFYH4kQ67/bbV8XaCQ=="
            crossorigin="anonymous"
            referrerpolicy="no-referrer"
        />
        <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/icon?family=Material+Icons"
        />
    </head>

    <body
        class="tw-flex tw-min-h-[100vh] tw-w-full tw-flex-col tw-bg-[#ffffff]"
    >
        <header
            class="tw-relative tw-z-20 tw-flex tw-h-[80px] tw-w-full tw-place-items-center tw-bg-primary tw-px-[10%] max-lg:tw-px-[5%] max-md:tw-mr-auto"
        >
            <div
                class="tw-relative tw-flex tw-h-full tw-w-full tw-place-items-center"
            >
                <div
                    class="tw-absolute tw-bottom-1 tw-h-[1px] tw-w-[100%] tw-bg-white"
                ></div>

                <a
                    href=""
                    class="tw-flex tw-w-fit tw-min-w-fit tw-place-items-center tw-gap-2 tw-text-white"
                >
                    <div class="tw-w-[50px] tw-p-1">
                        <img
                            src="./assets/logo.png"
                            alt="law logo"
                            class="tw-object-contain"
                        />
                    </div>
                    <div class="tw-text-xl">Law fire</div>
                </a>
                <div
                    class="collapsible-header animated-collapse"
                    id="collapsed-header-items"
                >
                    <div
                        class="tw-ml-auto tw-flex tw-h-full tw-w-fit tw-gap-3 tw-text-lg max-lg:tw-mt-[30px] max-lg:tw-flex-col max-lg:tw-place-items-end max-lg:tw-gap-5 lg:tw-place-items-center"
                    >
                        <a class="header-links" href=""> About us </a>
                        <a class="header-links" href=""> Services </a>
                        <a class="header-links" href=""> Practice areas </a>
                        <a class="header-links" href=""> Contact </a>
                    </div>
                    <div
                        class="tw-flex tw-place-items-center tw-gap-[20px] tw-p-2 tw-text-xl tw-text-gray-100 max-md:tw-w-full max-md:tw-place-content-center"
                    >
                        <a
                            href=""
                            class="btn !tw-bg-secondary !tw-text-base tw-transition-transform tw-duration-[0.3s] hover:tw-translate-x-2"
                        >
                            <span>Free consultation</span>
                            <i class="bi bi-arrow-right"></i>
                        </a>
                    </div>
                </div>
                <button
                    class="bi bi-list tw-absolute tw-right-3 tw-top-5 tw-z-50 tw-text-2xl tw-text-white lg:tw-hidden"
                    onclick="toggleHeader()"
                    aria-label="menu"
                    id="collapse-btn"
                >
                    <!-- <i class="bi bi-list"></i> -->
                </button>
            </div>
        </header>

        <section
            class="tw-flex tw-min-h-[80vh] tw-w-full tw-max-w-[100vw] tw-flex-col tw-overflow-hidden tw-bg-primary tw-text-white lg:tw-place-content-center"
        >
            <div class="tw-mt-4 tw-flex tw-h-full tw-w-full tw-flex-col">
                <div class="tw-flex tw-h-full tw-w-full tw-flex-col tw-gap-4">
                    <div
                        class="tw-flex tw-h-full tw-w-full tw-flex-col tw-place-content-center tw-gap-5 tw-px-[10%] lg:tw-mt-5 lg:tw-place-items-center"
                    >
                        <h2
                            class="tw-text-7xl tw-leading-normal max-lg:tw-text-4xl lg:tw-text-center"
                        >
                            Top Legal consultancy
                            <br />
                            in Vegas
                        </h2>
                        <div class="tw-max-w-[550px]">
                            Lorem ipsum dolor sit, amet consectetur adipisicing
                            elit. Neque illum vitae quo a explicabo in maxime
                            dolores repudiandae rerum tempora.
                        </div>
                        <div
                            class="tw-flex tw-gap-4 !tw-text-base max-md:tw-flex-col"
                        >
                            <a href="" class="btn !tw-bg-[#fff] !tw-text-black">
                                <span>Watch videos</span>
                                <i class="bi bi-camera-video-fill"></i>
                            </a>
                            <a
                                href=""
                                class="btn !tw-bg-secondary tw-transition-transform tw-duration-[0.3s] hover:tw-translate-x-2"
                            >
                                <span>Get free consultation</span>
                                <i class="bi bi-arrow-right"></i>
                            </a>
                        </div>
                    </div>

                    <div
                        class="tw-flex tw-h-full tw-w-full tw-place-content-center tw-place-items-center"
                    >
                        <div
                            class="tw-relative tw-h-full tw-max-h-[650px] tw-w-full tw-overflow-hidden"
                        >
                            <img
                                src="./assets/images/homepage/lawyers.jpg"
                                alt="lawyer"
                                class="tw-h-full tw-w-full tw-object-cover"
                            />

                            <div
                                class="gradient tw-absolute tw-left-0 tw-top-0 tw-h-full tw-w-full"
                            ></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section
            class="tw-flex tw-min-h-[60vh] tw-w-full tw-max-w-[100vw] tw-flex-col tw-place-content-center tw-overflow-hidden tw-bg-primary tw-text-white"
        >
            <div class="tw-mt-4 tw-flex tw-h-full tw-w-full tw-flex-col">
                <div
                    class="tw-flex tw-h-full tw-w-full tw-place-content-center tw-justify-around tw-gap-5 tw-px-[10%] max-lg:tw-flex-col"
                >
                    <!-- <div class="tw-border-solid tw-border-l-2 tw-border-secondary tw-w-1"></div> -->
                    <h2
                        class="tw-h-fit tw-border-l-2 tw-border-solid tw-border-secondary tw-pl-4 tw-text-7xl tw-leading-normal max-lg:tw-text-4xl"
                    >
                        Providing top
                        <br />
                        notch lawyers
                    </h2>

                    <div
                        class="tw-max-h-[450px] tw-max-w-[450px] tw-overflow-hidden"
                    >
                        <img
                            src="./assets/images/homepage/lawyers.jpg"
                            alt="lawyers"
                            class="tw-h-full tw-w-full"
                        />
                    </div>
                </div>
            </div>
        </section>

        <section
            class="tw-flex tw-min-h-[100vh] tw-w-full tw-flex-col tw-place-content-center tw-place-items-center tw-gap-[10%] tw-bg-[#fff] tw-p-4 tw-px-[20%] max-md:tw-gap-[4%] max-md:tw-px-[5%]"
        >
            <div
                class="tw-mt-[5%] tw-flex tw-w-full tw-place-content-center tw-gap-[10%] max-lg:tw-flex-col max-lg:tw-place-items-center max-lg:tw-gap-5"
            >
                <div>
                    <div class="tw-relative">
                        <div
                            class="tw-flex tw-h-[350px] tw-w-[400px] tw-min-w-[300px] tw-overflow-hidden max-lg:tw-mt-[5%] max-lg:tw-h-[300px] max-lg:tw-w-[300px]"
                        >
                            <img
                                src="./assets/images/homepage/law-group.jpg"
                                alt="law group"
                                class="tw-w-full tw-object-cover"
                            />
                        </div>
                        <div
                            class="tw-absolute tw-bottom-[-100px] tw-left-[-100px] tw-h-[250px] tw-w-[250px] tw-overflow-hidden max-lg:tw-hidden"
                        >
                            <video
                                class="tw-h-full tw-w-full tw-object-cover"
                                disablepictureinpicture
                                muted
                                autoplay
                                loop
                            >
                                <source
                                    src="assets/videos/law.mp4"
                                    type="video/mp4"
                                />
                                Your browser does not support the video tag.
                            </video>
                        </div>
                    </div>
                </div>
                <div
                    class="tw-flex tw-h-full tw-max-w-[500px] tw-flex-col tw-gap-2 max-lg:tw-mt-2 max-lg:tw-place-items-center max-lg:tw-gap-4 max-lg:tw-text-center"
                >
                    <h2
                        class="primary-text-color tw-text-5xl max-lg:tw-text-3xl"
                    >
                        Get the right guidance and support
                    </h2>
                    <div class="tw-mt-6 tw-text-justify max-lg:tw-text-sm">
                        Navigating legal challenges can be tough, but our law
                        firm is here to help. We offer clear, personalized
                        advice and strong support every step of the way. Whether
                        you need expert consultation or robust representation,
                        trust us to protect your rights and achieve the best
                        possible outcome.
                    </div>
                    <a href="" class="btn tw-mt-2"> Learn more </a>
                </div>
            </div>
        </section>

        <section
            class="tw-flex tw-min-h-[60vh] tw-w-full tw-flex-col tw-place-content-center tw-place-items-center tw-gap-[10%] tw-bg-[#EFEFEF] tw-p-8 tw-px-[15%] max-md:tw-h-max max-md:tw-min-h-[unset] max-md:tw-gap-[4%] max-md:tw-px-[5%]"
        >
            <div class="tw-h-[5px] tw-w-[80px] tw-bg-secondary"></div>

            <h2
                class="primary-text-color tw-mt-4 tw-text-4xl max-md:tw-text-2xl"
            >
                Diverse area of practice
            </h2>
            <!-- <h2 class="tw-text-5xl max-md:tw-text-3xl primary-text-color tw-text-center"></h2> -->

            <div
                class="tw-mt-[5%] tw-flex tw-w-full tw-flex-wrap tw-place-content-center tw-place-items-center tw-gap-8 max-lg:tw-mt-4 max-lg:tw-gap-5 max-md:tw-mt-8"
            >
                <a
                    href=""
                    class="tw-flex tw-h-[220px] tw-w-[500px] tw-gap-4 tw-bg-white tw-p-2 tw-px-4 tw-duration-[0.3s] hover:tw-shadow-xl max-lg:tw-max-w-full"
                >
                    <div
                        class="tw-flex tw-h-full tw-min-w-[80px] tw-place-content-center tw-place-items-center max-md:tw-h-[100px]"
                    >
                        <i
                            class="material-icons"
                            style="font-size: 60px; color: #a29252"
                            >gavel</i
                        >
                        <!-- <img src="./assets/icons/court.svg" 
                        alt="court" class="tw-h-full tw-w-full tw-object-contain"> -->
                    </div>
                    <div
                        class="tw-flex tw-h-full tw-flex-col tw-place-content-center tw-gap-2 tw-p-2"
                    >
                        <div
                            class="primary-text-color tw-text-xl tw-font-medium max-md:tw-text-lg"
                        >
                            Legal Counsel
                        </div>
                        <div class="tw-text-justify tw-text-gray-700">
                            Lorem ipsum dolor sit amet consectetur, adipisicing
                            elit. Perferendis quae sit repellendus adipisci id
                            voluptatum asperiores at ab, optio dolor aspernatur
                            illo atque eaque?
                        </div>
                    </div>
                </a>

                <a
                    href=""
                    class="tw-flex tw-h-[220px] tw-w-[500px] tw-gap-4 tw-bg-white tw-p-2 tw-px-4 tw-duration-[0.3s] hover:tw-shadow-xl max-lg:tw-max-w-full"
                >
                    <div
                        class="tw-flex tw-h-full tw-min-w-[80px] tw-place-content-center tw-place-items-center max-md:tw-h-[100px]"
                    >
                        <i
                            class="material-icons"
                            style="font-size: 60px; color: #a29252"
                            >apartment</i
                        >
                        <!-- <img src="./assets/icons/court.svg" 
                        alt="court" class="tw-h-full tw-w-full tw-object-contain"> -->
                    </div>
                    <div
                        class="tw-flex tw-h-full tw-flex-col tw-place-content-center tw-gap-2 tw-p-2"
                    >
                        <div
                            class="primary-text-color tw-text-xl tw-font-medium max-md:tw-text-lg"
                        >
                            Real estate
                        </div>
                        <div class="tw-text-justify tw-text-gray-700">
                            Lorem ipsum dolor sit amet consectetur, adipisicing
                            elit. Perferendis quae sit repellendus adipisci id
                            voluptatum asperiores at ab, optio dolor aspernatur
                            illo atque eaque?
                        </div>
                    </div>
                </a>

                <a
                    href=""
                    class="tw-flex tw-h-[220px] tw-w-[500px] tw-gap-4 tw-bg-white tw-p-2 tw-px-4 tw-duration-[0.3s] hover:tw-shadow-xl max-lg:tw-max-w-full"
                >
                    <div
                        class="tw-flex tw-h-full tw-min-w-[80px] tw-place-content-center tw-place-items-center max-md:tw-h-[100px]"
                    >
                        <i
                            class="material-icons"
                            style="font-size: 60px; color: #a29252"
                            >group</i
                        >
                        <!-- <img src="./assets/icons/court.svg" 
                        alt="court" class="tw-h-full tw-w-full tw-object-contain"> -->
                    </div>
                    <div
                        class="tw-flex tw-h-full tw-flex-col tw-place-content-center tw-gap-2 tw-p-2"
                    >
                        <div
                            class="primary-text-color tw-text-xl tw-font-medium max-md:tw-text-lg"
                        >
                            Divorce
                        </div>
                        <div class="tw-text-justify tw-text-gray-700">
                            Lorem ipsum dolor sit amet consectetur, adipisicing
                            elit. Perferendis quae sit repellendus adipisci id
                            voluptatum asperiores at ab, optio dolor aspernatur
                            illo atque eaque?
                        </div>
                    </div>
                </a>

                <a
                    href=""
                    class="tw-flex tw-h-[220px] tw-w-[500px] tw-gap-4 tw-bg-white tw-p-2 tw-px-4 tw-duration-[0.3s] hover:tw-shadow-xl max-lg:tw-max-w-full"
                >
                    <div
                        class="tw-flex tw-h-full tw-min-w-[80px] tw-place-content-center tw-place-items-center max-md:tw-h-[100px]"
                    >
                        <i
                            class="material-icons"
                            style="font-size: 60px; color: #a29252"
                            >minor_crash</i
                        >
                        <!-- <img src="./assets/icons/court.svg" 
                        alt="court" class="tw-h-full tw-w-full tw-object-contain"> -->
                    </div>
                    <div
                        class="tw-flex tw-h-full tw-flex-col tw-place-content-center tw-gap-2 tw-p-2"
                    >
                        <div
                            class="primary-text-color tw-text-xl tw-font-medium max-md:tw-text-lg"
                        >
                            Accidents
                        </div>
                        <div class="tw-text-justify tw-text-gray-700">
                            Lorem ipsum dolor sit amet consectetur, adipisicing
                            elit. Perferendis quae sit repellendus adipisci id
                            voluptatum asperiores at ab, optio dolor aspernatur
                            illo atque eaque?
                        </div>
                    </div>
                </a>
            </div>

            <a
                href=""
                target="_blank"
                rel="noreferrer"
                class="tw-mt-[5%] tw-flex tw-gap-2 tw-bg-primary tw-p-3 tw-px-[20px] tw-text-white tw-transition-transform tw-duration-[0.3s] hover:tw-translate-x-1 max-md:tw-p-2"
            >
                <span>Explore more</span>
                <i class="bi bi-arrow-right"></i>
            </a>
        </section>

        <section
            class="tw-flex tw-w-full tw-flex-col tw-place-content-center tw-place-items-center tw-bg-primary tw-p-[5%] tw-text-white max-md:tw-px-[5%]"
        >
            <h3
                class="tw-text-5xl tw-font-medium tw-text-secondary max-lg:tw-text-3xl"
            >
                In the News
            </h3>

            <div
                class="tw-mt-[5%] tw-flex tw-w-full tw-place-content-center tw-gap-x-10 tw-gap-y-16 max-lg:tw-flex max-lg:tw-flex-wrap max-lg:tw-gap-3"
            >
                <a
                    href=""
                    class="tw-flex tw-max-h-[500px] tw-w-[450px] tw-flex-col tw-gap-2 tw-bg-primaryLight max-md:tw-w-full"
                >
                    <div
                        class="tw-h-full tw-max-h-[350px] tw-w-full tw-overflow-hidden"
                    >
                        <img
                            src="assets/images/homepage/case-study1.jpg"
                            alt="case1"
                            class="tw-h-full tw-w-full tw-scale-[1.04] tw-object-cover tw-duration-[0.5s] hover:tw-scale-[1]"
                        />
                    </div>
                    <div class="tw-flex tw-gap-2 tw-p-4">
                        <div class="tw-flex tw-w-full tw-flex-col">
                            <h3 class="tw-text-xl tw-font-medium">
                                Discrimination suite wins $3 million
                            </h3>
                            <p class="tw-text-gray-300">Discrimination</p>
                            <p class="tw-mt-3 tw-text-gray-300">
                                June, 16, 2024
                            </p>
                        </div>
                        <div
                            class="tw-flex tw-h-full tw-max-w-[40px] tw-place-items-center"
                        >
                            <i class="bi bi-arrow-right-circle tw-text-2xl"></i>
                        </div>
                    </div>
                </a>
                <div class="tw-flex tw-flex-col tw-gap-4">
                    <a
                        href=""
                        class="tw-flex tw-w-full tw-max-w-[600px] tw-gap-2 tw-bg-primaryLight tw-p-6"
                    >
                        <div class="tw-flex tw-w-full tw-flex-col">
                            <h3 class="tw-text-xl tw-font-medium">
                                Tamber sued for accident that led to paralysis
                            </h3>
                            <p class="tw-text-gray-300">accidents</p>
                            <p class="tw-mt-3 tw-text-gray-300">
                                August, 25, 2024
                            </p>
                        </div>
                        <div
                            class="tw-flex tw-h-full tw-max-w-[40px] tw-place-items-center"
                        >
                            <i class="bi bi-arrow-right-circle tw-text-2xl"></i>
                        </div>
                    </a>

                    <a
                        href=""
                        class="tw-flex tw-w-full tw-max-w-[600px] tw-gap-2 tw-bg-primaryLight tw-p-6"
                    >
                        <div class="tw-flex tw-w-full tw-flex-col">
                            <h3 class="tw-text-xl tw-font-medium">
                                James wins after suing university for
                                discrimination
                            </h3>
                            <p class="tw-text-gray-300">discrimination</p>
                            <p class="tw-mt-3 tw-text-gray-300">
                                August, 25, 2024
                            </p>
                        </div>
                        <div
                            class="tw-flex tw-h-full tw-max-w-[40px] tw-place-items-center"
                        >
                            <i class="bi bi-arrow-right-circle tw-text-2xl"></i>
                        </div>
                    </a>

                    <a
                        href=""
                        class="tw-flex tw-w-full tw-max-w-[600px] tw-gap-2 tw-bg-primaryLight tw-p-6"
                    >
                        <div class="tw-flex tw-w-full tw-flex-col">
                            <h3 class="tw-text-xl tw-font-medium">
                                Another win for public
                            </h3>
                            <p class="tw-text-gray-300">accidents</p>
                            <p class="tw-mt-3 tw-text-gray-300">
                                August, 25, 2024
                            </p>
                        </div>
                        <div
                            class="tw-flex tw-h-full tw-max-w-[40px] tw-place-items-center"
                        >
                            <i class="bi bi-arrow-right-circle tw-text-2xl"></i>
                        </div>
                    </a>
                </div>
            </div>
            <a
                href=""
                target="_blank"
                rel="noreferrer"
                class="tw-mt-[5%] tw-flex tw-gap-2 tw-bg-secondary tw-p-3 tw-px-[20px] tw-text-white tw-transition-transform tw-duration-[0.3s] hover:tw-translate-x-1 max-md:tw-p-2"
            >
                <span>All news</span>
                <i class="bi bi-arrow-right"></i>
            </a>
        </section>

        <section
            class="tw-mt-5 tw-flex tw-w-full tw-flex-col tw-place-items-center tw-p-[5%]"
        >
            <h3
                class="primary-text-color tw-text-3xl tw-font-medium max-md:tw-text-2xl"
            >
                What some of our clients say
            </h3>

            <!-- Testimonials -->
            <div class="tw-max-w-[750px] max-md:tw-max-w-[100vw]">
                <div
                    class="swiper tw-mt-8 tw-flex tw-flex-col tw-gap-10 tw-space-y-8"
                >
                    <div class="swiper-wrapper">
                        <div
                            class="swiper-slide tw-flex tw-place-content-center"
                        >
                            <div
                                class="tw-flex tw-h-fit tw-max-w-[750px] tw-place-content-center tw-place-items-center tw-gap-10 tw-rounded-lg tw-p-4"
                            >
                                <div class="tw-flex tw-place-items-center">
                                    <div
                                        class="tw-h-[150px] tw-w-[150px] tw-overflow-hidden tw-rounded-full max-lg:tw-h-[80px] max-lg:tw-w-[80px]"
                                    >
                                        <img
                                            src="./assets/images/people/women.jpg"
                                            class="tw-h-full tw-w-full tw-object-cover"
                                            alt="women"
                                        />
                                    </div>
                                </div>
                                <div
                                    class="tw-flex tw-max-w-[450px] tw-flex-col tw-gap-4"
                                >
                                    <q
                                        class="tw-mt-4 tw-italic tw-text-gray-800"
                                    >
                                        Lorem ipsum dolor sit amet consectetur
                                        adipisicing elit. Voluptate, sequi sunt
                                        velit aut omnis nulla ut, autem corrupti
                                        nemo optio ipsam amet ducimus illum?
                                        Repellendus itaque autem alias eos quis.
                                    </q>
                                    <b>- Ferman</b>
                                    <div class="tw-mt-2 tw-text-yellow-400">
                                        <i class="bi bi-star-fill"></i>
                                        <i class="bi bi-star-fill"></i>
                                        <i class="bi bi-star-fill"></i>
                                        <i class="bi bi-star-fill"></i>
                                        <i class="bi bi-star-fill"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div
                            class="swiper-slide tw-flex tw-place-content-center"
                        >
                            <div
                                class="tw-flex tw-h-fit tw-max-w-[750px] tw-place-content-center tw-place-items-center tw-gap-10 tw-rounded-lg tw-p-4"
                            >
                                <div class="tw-flex tw-place-items-center">
                                    <div
                                        class="tw-h-[150px] tw-w-[150px] tw-overflow-hidden tw-rounded-full max-lg:tw-h-[80px] max-lg:tw-w-[80px]"
                                    >
                                        <img
                                            src="./assets/images/people/man.jpg"
                                            class="tw-h-full tw-w-full tw-object-cover"
                                            alt="man"
                                        />
                                    </div>
                                </div>
                                <div
                                    class="tw-flex tw-max-w-[450px] tw-flex-col tw-gap-4"
                                >
                                    <q
                                        class="tw-mt-4 tw-italic tw-text-gray-800"
                                    >
                                        Lorem ipsum dolor sit amet consectetur
                                        adipisicing elit. Voluptate, sequi sunt
                                        velit aut omnis nulla ut, autem corrupti
                                        nemo optio ipsam amet ducimus illum?
                                        Repellendus itaque autem alias eos quis.
                                    </q>
                                    <b>- Jame</b>
                                    <div class="tw-mt-2 tw-text-yellow-400">
                                        <i class="bi bi-star-fill"></i>
                                        <i class="bi bi-star-fill"></i>
                                        <i class="bi bi-star-fill"></i>
                                        <i class="bi bi-star-fill"></i>
                                        <i class="bi bi-star-fill"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div
                        class="pagination-container tw-flex tw-place-content-center"
                    ></div>

                    <div class="tw-flex tw-place-content-center tw-gap-6">
                        <div
                            class="testmonial-prev tw-flex tw-h-[40px] tw-w-[40px] tw-place-content-center tw-place-items-center tw-rounded-full tw-border-2 tw-border-solid tw-border-gray-300 tw-text-2xl"
                        >
                            <i class="bi bi-arrow-left"></i>
                        </div>
                        <div
                            class="testmonial-next tw-flex tw-h-[40px] tw-w-[40px] tw-place-content-center tw-place-items-center tw-rounded-full tw-border-2 tw-border-solid tw-border-gray-300 tw-text-2xl"
                        >
                            <i class="bi bi-arrow-right"></i>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section
            class="tw-flex tw-w-full tw-place-content-center tw-place-items-center tw-gap-[10%] tw-overflow-hidden tw-bg-[#EFEFEF] tw-p-4 max-lg:tw-flex-col"
            id="booking"
        >
            <div
                class="tw-mt-4 tw-flex tw-w-full tw-max-w-[550px] tw-flex-col tw-place-content-center tw-place-items-center tw-gap-5"
            >
                <iframe
                    src="https://www.google.com/maps/embed?"
                    class="tw-h-[500px] tw-w-[500px] max-md:tw-h-[250px] max-md:tw-w-[300px]"
                    style="border: 0"
                    allowfullscreen=""
                    loading="lazy"
                    referrerpolicy="no-referrer-when-downgrade"
                ></iframe>
            </div>

            <div
                class="tw-mt-[5%] tw-flex tw-h-full tw-flex-col tw-gap-[5%] max-lg:tw-mt-5 max-md:tw-w-full"
            >
                <div class="tw-flex tw-flex-col tw-gap-2">
                    <h2
                        class="primary-text-color tw-text-5xl tw-font-medium max-md:tw-text-3xl"
                    >
                        Request a consult
                    </h2>
                </div>
                <form
                    class="tw-mt-4 tw-flex tw-w-full tw-flex-col tw-gap-3 tw-overflow-hidden tw-p-2 max-md:tw-w-full"
                >
                    <div class="tw-flex tw-gap-2 max-md:tw-flex-col">
                        <div class="tw-flex tw-flex-col tw-gap-1">
                            <div class="tw-text-gray-500">First name</div>
                            <input
                                type="text"
                                class="input"
                                maxlength="10"
                                required
                                placeholder="name"
                            />
                        </div>
                        <div class="tw-flex tw-flex-col tw-gap-1">
                            <div class="tw-text-gray-500">Last name</div>
                            <input
                                type="text"
                                class="input"
                                maxlength="10"
                                required
                                placeholder="name"
                            />
                        </div>
                    </div>

                    <div class="tw-flex tw-w-full tw-flex-col tw-gap-4">
                        <div class="tw-flex tw-flex-col tw-gap-1">
                            <div class="tw-text-gray-500">Phone</div>
                            <input
                                type="text"
                                class="input"
                                required
                                placeholder="phone"
                            />
                        </div>
                        <div class="tw-flex tw-flex-col tw-gap-1">
                            <div class="tw-text-gray-500">Email</div>
                            <input
                                type="email"
                                class="input"
                                required
                                placeholder="email"
                                id="email"
                            />
                        </div>
                    </div>

                    <div class="tw-flex tw-w-full tw-flex-col tw-gap-2">
                        <div class="tw-text-gray-500">Inquiry</div>
                        <textarea
                            class="input tw-max-h-[250px] tw-min-h-[40px] tw-w-full tw-resize-y"
                        ></textarea>
                    </div>

                    <button
                        type="submit"
                        class="btn tw-ml-auto tw-mt-5 tw-transition-transform tw-duration-[0.3s] hover:tw-translate-x-2"
                    >
                        <span>Request</span>
                        <i class="bi bi-arrow-right"></i>
                    </button>
                </form>
                <!-- <div class="tw-flex tw-flex-col tw-gap-2 tw-mt-4 tw-text-center">
                <h3 class="tw-text-xl">To book call</h3>
                
                <div class="tw-text-3xl primary-text-color">
                    +1 122-122-122
                </div>
            </div> -->
            </div>
        </section>

        <section
            class="tw-flex tw-w-full tw-flex-col tw-place-content-center tw-place-items-center tw-gap-[10%] tw-bg-[#EFEFEF] tw-p-[5%] tw-px-[10%]"
        >
            <div
                class="tw-flex tw-w-full tw-flex-col tw-place-content-center tw-place-items-center tw-gap-3"
            >
                <h2 class="primary-text-color tw-text-3xl max-md:tw-text-xl">
                    Special Newsletter signup
                </h2>
                <h2 class="tw-text-xl max-md:tw-text-lg">
                    Get offers and updates
                </h2>

                <div
                    class="tw-flex tw-h-[40px] tw-place-items-center tw-overflow-hidden"
                >
                    <input
                        type="email"
                        class="input tw-h-full tw-w-full tw-px-3 tw-outline-none"
                        placeholder="email"
                    />
                    <button
                        class="btn tw-transition-colors tw-duration-[0.3s] hover:tw-bg-blue-900"
                    >
                        Signup
                    </button>
                </div>
            </div>
        </section>

        <footer
            class="tw-relative tw-flex tw-w-full tw-place-content-around tw-gap-3 tw-bg-primary tw-px-[10%] tw-pb-4 tw-pt-[5%] tw-text-white"
        >
            <div
                class="tw-relative tw-flex tw-h-full tw-w-full tw-flex-col tw-gap-2"
            >
                <div
                    class="tw-my-2 tw-flex tw-w-full tw-place-content-around tw-gap-3 max-md:tw-flex-col"
                >
                    <div
                        class="tw-flex tw-h-full tw-w-[250px] tw-flex-col tw-place-items-center tw-gap-6 max-md:tw-w-full"
                    >
                        <img
                            src="./assets/logo.png"
                            alt="logo"
                            class="tw-w-[150px]"
                        />
                        <div>
                            12111 Cypress,
                            <br />
                            TX,
                            <br />
                            Europe
                        </div>
                    </div>

                    <div
                        class="tw-flex tw-h-full tw-w-[250px] tw-flex-col tw-gap-4"
                    >
                        <h2 class="tw-text-3xl max-md:tw-text-xl">
                            Practice areas
                        </h2>
                        <div
                            class="tw-flex tw-flex-col tw-gap-3 max-md:tw-text-sm"
                        >
                            <a href="" class="footer-link">Divorce</a>
                            <a href="" class="footer-link">Real estate</a>
                            <a href="" class="footer-link">Defamation</a>
                            <a href="" class="footer-link">Discrimination</a>
                        </div>
                    </div>
                    <div
                        class="tw-flex tw-h-full tw-w-[250px] tw-flex-col tw-gap-4"
                    >
                        <h2 class="tw-text-3xl max-md:tw-text-xl">Resources</h2>
                        <div
                            class="tw-flex tw-flex-col tw-gap-3 max-md:tw-text-sm"
                        >
                            <a href="" class="footer-link">About us</a>
                            <a href="" class="footer-link">FAQ</a>
                            <a href="" class="footer-link">Contact Us</a>
                            <a href="" class="footer-link">Locations</a>
                            <a href="" class="footer-link">Privacy policy</a>
                        </div>
                    </div>
                </div>
                <div class="tw-h-[1px] tw-w-[100%] tw-bg-white"></div>

                <div class="tw-mt-3 tw-flex tw-gap-4 tw-text-2xl">
                    <a href="" aria-label="Facebook">
                        <i class="bi bi-facebook"></i>
                    </a>
                    <a
                        href="https://twitter.com/pauls_freeman"
                        aria-label="Twitter"
                    >
                        <i class="bi bi-twitter"></i>
                    </a>
                </div>
            </div>
        </footer>
    </body>

    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.0/gsap.min.js"
        integrity="sha512-B1lby8cGcAUU3GR+Fd809/ZxgHbfwJMp0jLTVfHiArTuUt++VqSlJpaJvhNtRf3NERaxDNmmxkdx2o+aHd4bvw=="
        crossorigin="anonymous"
        referrerpolicy="no-referrer"
    ></script>
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.0/ScrollTrigger.min.js"
        integrity="sha512-AY2+JxnBETJ0wcXnLPCcZJIJx0eimyhz3OJ55k2Jx4RtYC+XdIi2VtJQ+tP3BaTst4otlGG1TtPJ9fKrAUnRdQ=="
        crossorigin="anonymous"
        referrerpolicy="no-referrer"
    ></script>

    <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
    />

    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

    <script src="./scripts/utils.js"></script>
    <script src="index.js"></script>

    <style>
        .swiper-pagination-bullet {
            width: 10px;
            height: 10px;
            text-align: center;
            /* font-size: 12px; */
            opacity: 1;
            background: #dad8d8fa;
            left: auto;
        }
        .swiper-pagination-bullet:hover {
            color: #000;
            opacity: 1;
            background: #ede0e0bd;
        }

        .swiper-pagination-bullet-active {
            background: #cf9455 !important;
        }

        .swiper {
            padding: 10px !important;
        }
    </style>

    <script>
        const swiper = new Swiper('.swiper', {
            // Optional parameters
            direction: 'horizontal',
            loop: true,
            centeredSlides: true,

            // If we need pagination
            pagination: {
                el: '.pagination-container',
                clickable: true,
                renderBullet: function (index, className) {
                    return `<span class="${className}"></span>`
                },
            },
            // Navigation arrows
            navigation: {
                nextEl: '.testmonial-next',
                prevEl: '.testmonial-prev',
            },
        })
    </script>
</html>
